<template>
    <view class="wxBindPhone">
        <view class="dangqian_nbr">绑定手机号码</view>
        <view class="bakcffff">
            <view class="bind_nbr">
                <text>手机号</text>
                <input id='phone' placeholder="请输入手机号" type="text" value="{{phone}}" bindinput="changeVal">
            </view>
            <view class="dislpayTabcll">
                <view class="bind_nbr">
                    <text>验证码</text>
                    <input id='code' placeholder="请输入验证码" type="text" value="{{code}}" bindinput="changeVal">
                </view>
                <view class="huoqu">
                    <button @tap="sendMSGINfo">获取验证码</button>
                </view>
            </view>
            <view class="button type_main" @tap="loginOut">绑定手机号</view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import utils from '@/utils/utils';
    import tip from '@/utils/tip';
    import {
        USER_INFO, USER_SPECICAL_INFO,USER_ID
    } from '@/utils/constant';

    export default class wxBindPhone extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '手机绑定'    // 头部标题
        };
        components = {};

        data = {
            phone:'',
            code:'',
            key:'',
            userid:''
        };

        // 获取短信验证码
        async sendMSGToUser (data){
            api.sendSms({
                query: data
            }).then(function(res){
                if(res.data.code == "0"){
                    tip.toast("短信发送成功",null,"none");
                }else{
                    tip.toast("短信发送失败",null,"none");
                }
            })
        }

        // 绑定手机号码
        async bindPhoneNum (){
            let _this = this;
            let user_id = _this.userid
            api.bindPhone({
                query: {}
            },"userId="+user_id+"&phone="+_this.phone+"&smsCode="+_this.code+"&smsCodeKey="+_this.key).then(function(res){
                if(res.data.code == "0"){
                    wepy.navigateTo({
                        url: '/pages/personalCenter/register'
                    });
                }else{
                    tip.error(res.data.msg)
                }
            })
        }

        onLoad(option){
            this.userid = option.userid;
        }

        methods = {  // 方法
            changeVal(e){
                let self = this;
                switch(e.target.id){
                    case 'phone':
                    self.phone = e.detail.value;
                    self.$apply();
                    break;

                    case 'code':
                    self.code = e.detail.value;
                    self.$apply();
                    break;

                    default:
                    break;
                }
            },
            sendMSGINfo(){
                // 检查手机格式是否正确
                let _that = this;
                setTimeout(function() {
                    let phoneFormat = utils.vailPhone(_that.phone);
                    if(phoneFormat){
                        // 是手机格式,发送验证码
                        _that.key = utils.getUUId()
                        let _par = {
                            phone:_that.phone,
                            key:_that.key,
                        }
                       _that.sendMSGToUser(_par);
                    }else{
                        // 不是手机格式
                        tip.toast("请输入正确的手机号码",null,"none");
                    }
                },0)
            },
            loginOut(){
                let self = this;
                setTimeout(function() {
                    if(!self.phone){
                        return tip.toast("请输入手机号码",null,"none");
                    }else if(!utils.vailPhone(self.phone)){
                        return tip.toast("请输入正确的手机号码",null,"none");
                    }else if(!self.code){
                        return tip.toast("请输入验证码",null,"none");
                    }
                    self.bindPhoneNum();
                },0)
            }
        };
        events = {};
    }

</script>
<style lang="less">

    .wxBindPhone {
        .dangqian_nbr {
            padding: 20rpx 30rpx;
        }
        .bakcffff {
            background: #fff;
            padding: 20rpx;
            padding-bottom: 40rpx;
            > view {
                margin-top: 20rpx;
            }
        }
        .bind_nbr {
            border: 1px solid #ddd;
            border-radius: 2px;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            text {
                display: table-cell;
                padding-left: 30rpx;
                padding-right: 30rpx;
                vertical-align: middle;
                font-size: 26rpx;
                color: #333;
            }
            input {
                display: table-cell;
                vertical-align: middle;
                font-size: 26rpx;
            }
        }
        .huoqu {
            button {
                font-size: 26rpx;
                padding-top: 5rpx;
                padding-bottom: 5rpx;
                color: #fff;
                border: none;
                background: orange;
            }
        }
        .dislpayTabcll {
            .bind_nbr {
                width: 488rpx;
                display: table-cell;
                vertical-align: middle;
            }
            .huoqu {
                width: 220rpx;
                display: table-cell;
                vertical-align: middle;
                overflow: hidden;
                button {
                    width: 200rpx;
                    float: right;
                }
                image {
                    width: 200rpx;
                    height: 70rpx;
                    float: right;
                }
            }
        }
        .pad20 {
            padding: 0 20rpx;
        }
    }
</style>
